<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper" class="color-white" :style="styles.header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back fixed minPadding back_alias="account">
				<view slot="title">
					<view id="title" class="fw-bolder">{{renders.main_title}}</view>
				</view>
			</nii-navbar>
			<view id="infos">
				<view class="infos min-padding">
					<view class="infos_box d-flex justify-content-between align-items-center theme_text">
						<view class="info d-flex align-items-center">
							<view class="avatar_box overflow-hidden rounded-circle bg-white">
								<u--image :src="renders.infos.avatar" width="100rpx" height="100rpx" radius="100rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="avatar">
								  <template v-slot:loading>
									 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
								  </template>
								  <template v-slot:error>
									 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
								  </template>
								</u--image>
							</view>
							<view class="account">
								<view class="names d-flex align-items-center">
									<view class="nickname fw-bolder">{{renders.infos.nickname}}</view>
									<view class="level d-flex align-items-center">
										<view class="domxee_icon fw-bold iconfont icon-vip"></view>
										<view class="name">{{renders.infos.level_name}}</view>
									</view>
								</view>
								<view class="rows d-flex align-items-center flex-wrap">
									<view class="row" v-for="(row, index) in renders.infos.rows" :key="index">{{row}}</view>
								</view>
							</view>
						</view>
						<!-- <view class="qr_box text-center" v-if="renders.infos.qr.enable" @click="navigateAction(renders.infos.qr.alias, renders.infos.qr.params)">
							<view class="domxee_icon">&#xe60a;</view>
							<view class="text">{{renders.infos.qr.text}}</view>
						</view> -->
					</view>
					<view class="idents d-flex align-items-center flex-wrap">
						<view class="ident" v-for="(ident, index) in renders.infos.idents" :key="index">{{ident}}</view>
					</view>
				</view>
			</view>
		</view>
		<view id="content_wrapper">
			<view id="invite" v-if="renders.invite.enable">
				<view class="invite min-padding">
					<view class="invite_box section">
						<view class="title fw-bold less_text">{{renders.invite.title}}</view>
						<view class="content d-flex align-items-center flex-wrap fw-bolder">
							<view class="nickname item">{{renders.invite.nickname}}</view>
							<view class="mobile item">{{renders.invite.mobile}}</view>
						</view>
					</view>
				</view>
			</view>
			<view id="counts" v-if="renders.counts.enable">
				<view class="counts min-padding">
					<view class="counts_box section d-flex justify-content-evenly align-items-center text-center">
						<view :class="['count', (renders.lists.filters.type == count.type ? 'color' : '')]" v-for="(count, index) in renders.counts.lists" :key="index" @click="navigateAction(count.alias, count.params)" v-if="count.enable">
							<view class="value fw-bolder">{{count.count}}</view>
							<view :class="['name fw-bold', (renders.lists.filters.type == count.type ? 'color fw-bolder' : 'less_text')]">{{count.name}}</view>
						</view>
					</view>
				</view>
			</view>

			<view id="search" v-if="renders.search.enable">
				<view class="search min-padding">
					<view class="search_box section d-flex justify-content-between align-items-center">
						<view class="domxee_icon vice_text">&#xe65c;</view>
						<input type="text" class="input w-fill-available" placeholder-class="vice_text" :placeholder="renders.search.placeholder" v-model="renders.lists.filters.search_keyword">
						<view class="button text-nowrap bg" @click="getLists(true)">{{renders.search.button}}</view>
					</view>
				</view>
			</view>
			<view id="lists" v-if="renders.lists.enable">
				<view class="lists d-padding">
					<view class="lists_box">
						<view class="contents">
							<view class="content section" v-for="(content, index) in data.sections.lists.lists" :key="index">
								<view class="names d-flex justify-content-between align-items-center">
									<view class="left d-flex align-items-center">
										<view class="avatar_box">
											<u--image :src="renders.infos.avatar" width="40rpx" height="40rpx" radius="40rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="avatar">
											  <template v-slot:loading>
												 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
											  </template>
											  <template v-slot:error>
												 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
											  </template>
											</u--image>
										</view>
										<view class="nickname fw-bolder">{{content.nickname}}</view>
									</view>
									<view class="level d-flex align-items-center">
										<!-- <view class="domxee_icon fw-bold">&#xe6c7;</view> -->
										<view class="name">{{content.level_name}}</view>
									</view>
								</view>
								<view class="line bg_less"></view>
								<view class="values d-flex align-items-center justify-content-between flex-wrap">
									<view class="value vice_text" v-for="(value, index) in content.values" :key="index">{{value}}</view>
								</view>
								<!-- <view class="line bg_less" v-if="content.tags.length > 0"></view>
								<view class="tags d-flex align-items-center flex-wrap" v-if="content.tags.length > 0">
									<view class="tag bg_op_1 text-nowrap" v-for="(tag, index) in content.tags" :key="index">{{tag}}</view>
								</view> -->
							</view>
							<view class="lists_loading" v-if="data.sections.lists.mode == 'loading'">
								<u-loading-icon mode="circle" :inactive-color="globalData.colors.theme.color" :textColor="globalData.colors.theme.color" :color="globalData.colors.current.vice" size="13" textSize="13" text="正在加载列表..."></u-loading-icon>
							</view>
							<view class="lists_finished text-center fw-bold less_text" v-if="data.sections.lists.mode == 'finished'">— 已到底部 —</view>
							<view class="lists_empty text-center" v-if="data.sections.lists.mode == 'empty'">
								<view class="iconfont icon-search font-90"></view>
								<view class="text less_text fw-bold">暂无相关{{renders.lists.title}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {
					header_wrapper: ''
				},
				shows: {

				},
				renders: {
					main_title: "",
					background: '',
					infos: {avatar: '', nickname: '', rows: [], level_name: '', idents: [], qr: {enable: true, text: '', alias: 'none', params: {}}},
					search: {enable: false, placeholder: '', button: ''},
					ad: false,
					invite: {enable: false, title: '', nickname: '', mobile: ''},
					counts: {
						enable: false,
						lists: [
							{enable: false, name: '', count: '', type: '', alias: '', params: {}, action: ''},
						],
					},
					lists: {enable: false, title: '', filters: {type: '', search_keyword: '', page: 1}}
				},
				data: {
					sections: {
						lists: {mode: 'loading', lists: []},
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType); },
			//拨打电话
			callPhone: function(mobile) {uni.makePhoneCall({phoneNumber: mobile});},
			//复制数据
			clipboardData: function (text) {const that = this;that.nii_common.clipboardData(text);},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				!that.ready && that.nii_common.toastLoading('加载中');
				//开始准备
				that.ready = false;				
				//发起请求
				that.nii_common.request.build('merchant/franchise_information', that.options, 'GET', function (res) {
					//设置准备已就绪
					that.ready = true;
					//设置数据
					that.renders = res.data;
					//设置信息
					that.styles.header_wrapper = ['background:url('+res.data.background+') no-repeat top center / cover'].join(';');
					//获取列表
					that.getLists(true);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);	
			},
			getLists: function (refresh) {
				//设置对象
				let that = this;
				//判断是否刷新列表
				if (refresh) {					
					that.renders.lists.filters.page = 1;
					that.data.sections.lists = {mode: 'refresh', lists: []};	
				}
				//判断是否无追加内容
				if (that.data.sections.lists.mode !== 'finished' && that.data.sections.lists.mode !== 'empty' && that.data.sections.lists.mode !== 'loading') {				
					//设置刷新
					that.data.sections.lists.mode = 'loading';				
					//发起请求
					that.nii_common.request.build('merchant/franchise_lists', that.renders.lists.filters, 'POST', function (res) {
						//设置已激活
						that.data.sections.lists.mode = 'active';
						//判断是否无数据
						if (uni.$u.test.isEmpty(res.data.lists)) {
							//判断当前页码是否为第一页
							if (parseInt(that.renders.lists.filters.page) === 1) {
								//设置数据为空
								that.data.sections.lists.mode = 'empty';
							} else {
								//设置数据已加载完毕
								that.data.sections.lists.mode = 'finished';
							}
						} else {
							console.log(res.data.lists);
							//循环列表
							res.data.lists.forEach((good, index) => {
								//增加信息
								that.data.sections.lists.lists.push(good);
								console.log(that.data.sections.lists.lists);
							});
							//判断是否为最后一页
							if (parseInt(res.data.lists.length) < parseInt(res.data.page_size)) {
								//设置数据已加载完毕
								that.data.sections.lists.mode = 'finished';
							}
						}
						//增加页码
						that.renders.lists.filters.page += 1;
					}, function (res) {
						//提示错误
						that.nii_common.toastAlert(res.msg);
					}, function(res) {
						//隐藏loading
						that.nii_common.toastLoadingHide();
					}, true);	
				}
			},
			switchType: function (type) {
				//设置对象
				let that = this;
				//切换类型
				that.renders.lists.filters.type = type;
				//刷新列表
				that.getLists(true);
			},
			// requestDemo: function() {
			// 	//获取对象
			// 	const that = this;
			// 	//loading
			// 	that.nii_common.toastLoading('处理中...');
			// 	//发起请求
			// 	that.nii_common.request.build('', {}, 'POST', function (res) {
			// 		//提示成功
			// 		that.nii_common.toastAlert('处理成功', 'success');
			// 	}, function (res) {
			// 		//提示错误
			// 		that.nii_common.toastAlert(res.msg);
			// 	}, function(res) {
			// 		//隐藏loading
			// 		that.nii_common.toastLoadingHide();
			// 	});	
			// }
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			//追加列表
			// that.getLists();
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	.page_color {
		color: #FFFFFF;
	}
	#domxee-content{
		position: relative;
		z-index: 0;
	}
	#header_wrapper {
		padding-bottom: 80rpx;
		position: relative;
		z-index: -1;
		overflow: hidden;
		#title {
			font-size: 40rpx;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			margin-left: 10rpx;
			font-weight: 600;
		}
		#infos {
			margin-top: 30rpx;
			.infos {
				.infos_box {
					.info {
						.avatar_box {
							width: 100rpx;
							height: 100rpx;
							border-radius: 100rpx;
							margin-right: 20rpx;
						}
						.account {
							.names {
								.nickname {
									font-size: 32rpx;
									line-height: 44rpx;
									margin-right: 20rpx;
								}
								.level {
									background: #ECD6B1;
									border-radius: 20rpx;
									font-size: 24rpx;
									line-height: 40rpx;
									padding: 0 20rpx;
									color: #333333;
									.domxee_icon {
										color: #333333;
										margin-right: 8rpx;
										font-size: 24rpx;
										line-height: 40rpx;
									}
								}
							}
							.rows {
								margin-top: 10rpx;
								width: 450rpx;
								.row {
									margin: 10rpx 30rpx 0 0;
									font-size: 24rpx;
									line-height: 34rpx;
								}
							}
						}
					}
					.qr_box {
						width: 80rpx;
						.domxee_icon {
							font-size: 60rpx;
							line-height: 60rpx;
							margin: 0 auto;
						}
						.text {
							margin-top: 10rpx;
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
				}
				.idents {
					margin-left: 120rpx;
					margin-top: 10rpx;
					.ident {
						padding: 0 20rpx;
						height: 44rpx;
						background: rgba(0,0,0,0.3);
						border-radius: 20rpx;
						line-height: 44rpx;
						font-size: 24rpx;
						color: #F5DEB5;
						margin-right: 20rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
		
	}
	#header_wrapper::after {
		content: '';
		width: 120%;
		height: 120%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		
		top: 0;
		z-index: -1;
		border-radius: 0 0 100% 100%;
		background: linear-gradient(135deg, #389944 0%, #389944 100%);
	}
	#content_wrapper {
		padding-bottom: 300rpx;
		margin-top: -30rpx;
		#invite {
			margin-bottom: 30rpx;
			.invite {
				.invite_box {
					padding: 30rpx 40rpx;
					border-radius: 20rpx;
					.title {
						font-size: 24rpx;
						line-height: 34rpx;
					}
					.content {
						margin-top: 10rpx;
						.item {
							margin: 10rpx 30rpx 0 0;
							font-size: 28rpx;
							line-height: 40rpx;
						}
					}
				}
			}
		}
		#counts {
			.counts {
				.counts_box {
					padding: 30rpx;
					border-radius: 20rpx;
					.count {
						width: 300rpx;
						.value {
							font-size: 40rpx;
							line-height: 56rpx;
						}
						.name {
							margin-top: 20rpx;
							font-size: 24rpx;
							line-height: 34rpx;
						}
					}
				}
			}
		}
		#search {
			margin-top: 20rpx;
			.search {
				.search_box {
					padding: 20rpx;
					border-radius: 20rpx;
					.domxee_icon {
						font-size: 30rpx;
						line-height: 34rpx;
						margin-right: 20rpx;
						font-weight: 500;
					}
					.input {
						font-size: 24rpx;
						line-height: 34rpx;
						margin-right: 20rpx;
					}
					.button {
						padding: 8rpx 20rpx;
						font-size: 24rpx;
						line-height: 34rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
		#ad {
			margin-top: 30rpx;
		}
		#lists {
			margin-top: 30rpx;
			.lists {
				.lists_box {
					.contents {
						border-radius: 20rpx;
						margin-top: 50rpx;
						.lists_loading {
							margin-top: 30rpx;
						}
						.lists_finished {
							margin-top: 30rpx;
							font-size: 26rpx;
							line-height: 34rpx;
						}
						.lists_empty {
							margin-top: 30rpx;
							.domxee_icon {			
								font-size: 300rpx;
								line-height: 300rpx;
							}
							.text {
								margin-top: 10rpx;
								font-size: 26rpx;
								line-height: 34rpx;
							}
						}
						.content {
							margin-top: 30rpx;
							padding: 30rpx 20rpx;
							border-radius: 20rpx;
							.names {
								.left {
									.avatar_box {
										width: 40rpx;
										height: 40rpx;
										border-radius: 40rpx;
										margin-right: 10rpx;
									}
									.nickname {
										font-size: 26rpx;
										line-height: 36rpx;
									}
								}
								.level {
									background: #ECD6B1;
									border-radius: 20rpx;
									font-size: 24rpx;
									line-height: 40rpx;
									padding: 0 20rpx;
									color: #333333;
									.domxee_icon {
										color: #333333;
										margin-right: 8rpx;
										font-size: 24rpx;
										line-height: 40rpx;
									}
								}
							}
							.line {
								margin: 30rpx 0 0 0;
								width: 100%;
								height: 2rpx;
								opacity: .5;
							}
							.values {
								.value {
									width: 300rpx;
									font-size: 26rpx;
									line-height: 36rpx;
									margin: 30rpx 0 0 0;
								}
								.value:nth-of-type(n+2) {
									margin-right: 0;
								}
 							}
							.tags {
								.tag {
									margin: 30rpx 30rpx 0 0;
									width: max-content;
									border-radius: 20rpx;
									padding: 4rpx 20rpx;
									font-size: 24rpx;
									line-height: 34rpx;
								}
							}
						}
						.content:first-child {
							margin-top: 0;
						}
					}
					
				}
			}
		}
		
		
	}
</style>